<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-18 18:01:27
 * @LastEditTime: 2019-08-19 15:31:26
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="content-box">
    <div class="scanSvg" @click="getAqCode">
      <svg
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2867"
      >
        <path
          d="M347.136 830.464H220.672c-7.168 0-14.336-3.072-19.456-8.192s-8.192-12.288-8.192-19.968v-125.952c0-9.216-5.12-18.432-13.312-23.04-4.096-2.56-8.704-3.584-13.312-3.584-4.608 0-9.216 1.024-13.312 3.584-8.192 4.608-13.312 13.312-13.312 23.04v126.464c0 21.504 8.192 41.984 23.552 56.832 15.36 15.36 35.328 23.552 56.832 23.552h126.464c9.216 0 18.432-5.12 23.04-13.312 4.608-8.192 4.608-18.432 0-26.624-4.608-7.68-13.312-12.8-22.528-12.8zM803.328 140.8h-126.464c-9.216 0-18.432 5.12-23.04 13.312-4.608 8.192-4.608 18.432 0 26.624s13.312 13.312 23.04 13.312h126.464c15.36 0 27.648 12.288 27.648 27.648V348.16c0 9.216 5.12 18.432 13.312 23.04 8.192 4.608 18.432 4.608 26.624 0s13.312-13.312 13.312-23.04V221.696c0-21.504-8.192-41.984-23.552-56.832-15.36-15.872-35.84-24.064-57.344-24.064zM153.088 370.688c8.192 4.608 18.432 4.608 26.624 0s13.312-13.312 13.312-23.04V221.696c0-15.36 12.288-27.648 27.648-27.648h126.464c9.216 0 17.92-5.12 23.04-13.312 4.608-8.192 4.608-18.432 0-26.624s-13.312-13.312-23.04-13.312H220.672c-21.504 0-41.984 8.192-56.832 23.552-15.36 15.36-23.552 35.328-23.552 56.832v126.464c0 9.728 5.12 18.432 12.8 23.04z"
          fill="#2E77ED"
          p-id="2868"
        />
        <path
          d="M183.808 527.36c4.096 7.68 11.776 12.8 19.456 12.8h618.496c8.192 0 15.36-5.12 19.456-12.8 4.096-7.68 4.096-17.408 0-25.6-4.096-7.68-11.776-12.8-19.456-12.8H203.776c-8.192 0-15.36 5.12-19.456 12.8-4.608 7.68-4.608 17.92-0.512 25.6z"
          fill="#FFBB12"
          p-id="2869"
        />
        <path
          d="M871.936 653.312c-8.192-4.608-18.432-4.608-26.624 0s-13.312 13.312-13.312 23.04v126.464c0 15.36-12.288 27.648-27.648 27.648h-126.464c-9.216 0-17.92 5.12-23.04 13.312-4.608 8.192-4.608 18.432 0 26.624s13.312 13.312 23.04 13.312h126.464c21.504 0 41.984-8.192 56.832-23.552 15.36-15.36 23.552-35.328 23.552-56.832v-126.464c0-10.24-5.12-18.944-12.8-23.552z"
          fill="#2E77ED"
          p-id="2870"
        />
      </svg>
    </div>
    <div>
        <h2>{{aqCode}}</h2>
    </div>
    <button class="submit-Info" @click="summitInfo">提交信息</button>
  </div>
</template>
<script>
// import VConsole from "vconsole";
import "../alipayjsapi";
export default {
  data() {
    return {
      aqCode: {}
    };
  },
  mounted() {
    // new VConsole();
  },
  methods: {
    getAqCode() {
      ap.scan((res) => {
        this.aqCode = res.code;
      });
    },
    summitInfo() {
        ap.alert('submit!')
    }
  }
};
</script>

<style lang="scss">
.content-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .scanSvg {
    width: 200px;
    height: 200px;
    margin-top: 50px;
    transition: transform 0.1s ease-out;
    svg {
      width: 100%;
      height: 100%;
    }
    &:active {
      transform: scale(0.9);
    }
  }
  .submit-Info {
    position: fixed;
    bottom: 20px;
    width: 80%;
    height: 40px;
    line-height: 0.5;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    &:hover {
      background: #66b1ff;
      border-color: #66b1ff;
    }
  }
}
</style>